<template>
  <div class="home">
    <!-- 顶层通知 -->
    <van-notice-bar
    left-icon="volume-o"
    mode="closeable"
    :text="navNote"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe"
    :autoplay="3000"
    indicator-color="white"
    lazy-render
    >
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

  </div>
</template>
st
<style lang="scss" scoped>
  .home{
    height: 100%;
    width: 100%;
    background-color: #f7f8fa;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img{
      height: 100%;
    }
  }
</style>

<script>
import { onMounted, onUnmounted } from '@vue/runtime-core'
import { useStore } from 'vuex'
// import { ref } from '@vue/reactivity'
export default {
  setup () {
    const store = useStore()
    onMounted(() => {
      store.commit('changeNavBackIsClose')
      store.commit('changeNavAboutIsShow')
      store.commit('changeNavTitleText', '九耀 · 2022')
    })
    onUnmounted(() => {
      store.commit('changeNavBackIsShow')
    })
    const images = [
      'https://img.yzcdn.cn/vant/apple-1.jpg',
      'https://img.yzcdn.cn/vant/apple-2.jpg'
    ]
    const navNote = 'visions7.20.1版本已上线，本版本全站支持移动端及PC浏览器，对于IE浏览器及较为低级的浏览器不再支持,如您在浏览时发现本站存在BUG，您可以通过导航栏上的图标进入“关于”页面,告知本站BUG详情，鄙人不胜感激！'
    return {
      images,
      navNote

    }
  }
}
</script>
